<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    
    <link rel="stylesheet" href="./web/css/public.css">
    <link rel="stylesheet" href="./web/css/edit_mine.css">
    <link rel="stylesheet" href="./web/css/bui.css">
    <script src="./web/js/rem.js"></script>
    <script src="./web/js/jquery.js"></script>
    <script src="./web/js/bui.js"></script>
</head>

<body>
        <div class="bui-page">
    <main>
            <div class="avatar">
                    <input class="inputfile" id="headImage" type="file">
                    <div class="lt">
                        <span>头像</span>
                        <img id='head_img' src="./web/img/rencai11.png" alt="">
                    </div>
                    <img class="rt" src="./web/img/more.png" alt="">
                </div>
                <div class="username">
                    <span>姓名</span>
                    <input type="text" placeholder="请输入姓名">
                </div>
                <div class="worknum">
                    <span>工号</span>
                    <input type="number" placeholder="请输入工号">
                </div>
                <div class="tel">
                    <span>联系方式</span>
                    <input type="number" placeholder="请输入联系方式">
                </div>
                <div class="college">
                    <div class="lt">
                        <span>学院</span>
                        <div id="sel-val" style="-webkit-box-orient: vertical; ">请选择学院</div>
                        <select id="select-value" onchange="college();">
                            <option value="请选择学院" selected>请选择学院</option>
                            <option value="计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发">计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发</option>
                            <option value="小程序开发">小程序开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="智能人工">智能人工</option>
                            <option value="小虾米">小虾米</option>
                            <option value="王思">王思</option>
                            <option value="王五">王五</option>
                            <option value="王柳">王柳</option>
                            <option value="十天">十天</option>
                        </select>
                    </div>
                    <script>
                        function college() {
                            $('#sel-val').text($("#select-value option:selected").val())
                        }
                    </script>
                    <div class="rt">
                        <img src="./web/img/more.png" alt="">
                    </div>
                </div>
                <div class="profess">
                    <div class="lt">
                        <span>专业</span>
                        <div id="sel-val1" style="-webkit-box-orient: vertical; ">请选择专业</div>
                        <select id="select-value1" onchange="college1();">
                            <option value="请选择专业" selected>请选择专业</option>
                            <option value="计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发">计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发计算机开发</option>
                            <option value="小程序开发">小程序开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="PC开发">PC开发</option>
                            <option value="智能人工">智能人工</option>
                            <option value="小虾米">小虾米</option>
                            <option value="王思">王思</option>
                            <option value="王五">王五</option>
                            <option value="王柳">王柳</option>
                            <option value="十天">十天</option>
                        </select>
                    </div>
                    <div class="rt">
                        <img src="./web/img/more.png" alt="">
                    </div>
                    <script>
                        function college1() {
                            $('#sel-val1').text($("#select-value1 option:selected").val())
                        }
                    </script>
                </div>
                <div class="tag">
                    <div class="lts">
                        <span>标签</span>
                        <input type="text" placeholder="新建标签" id="tag" style="width:3rem;flex: unset">
                    </div>
                    <button class="save" onclick="save()">保存</button>
                </div>
                <div class="custom-tag" style="border: 0">
                    <div class="lt">
                        <span>自主标签</span>
                        <button id="edit-tag" class="edit-tag">编辑</button>
                    </div>
                </div>
                <ul class="custom-list" id="custom-item">
                    <!-- <li class="custom-item">研究员</li> -->
                </ul>
                <div class="introduce">
                    <span>个人简介</span>
                    <textarea type="text" style="resize: none;" placeholder="请输入"></textarea>
                </div>
                <div class="submit">
                    <button>保存</button>
                </div>
                <div class="bottom-bar">
                    <div>Copyright©2019 　山东科技大学 </div>
                    <div>鲁ICP备09051012号</div>
                </div>
    </main>

</div>
    <script>
        var imgArray = [];
        var xmlhttp;
        var isClick = true;
        xmlhttp = new XMLHttpRequest();

        $('#headImage').on('change', function () {
            //当chooseImage的值改变时，执行此函数
            var filePath = $(this).val(), //获取到input的value，里面是文件的路径
                fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),//这段下面检测用
                src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式就是可以让这个某个img的src等于他，就能显示
            //获取input 中的file流
            var files = document.getElementById("headImage").files;
            //from路径
            var FileController = "https://api.it120.cc/zhuyuan98/dfs/upload/file";
            //创建一个不再dom树上的from
            var form = new FormData();
            form.append("author", "hooyes");                        // 可以增加表单数据
            form.append("file", files[0]);                           // 文件对象
            //这一段是原生js的ajax发送需要判断ie6和5上面给做够判断
            // xmlhttp.onreadystatechange = function () {
            //     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //         imgArray[0] = xmlhttp.responseText;
            //         console.log(xmlhttp)
            //     }
            // }
            //这俩东西就不用动了
            xmlhttp.open("post", FileController, true);
            xmlhttp.send(form);
            // 检查是否是图片
            if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
                bui.alert('上传错误,文件格式必须为：png/jpg/jpeg');
                
                return;
            } else {
                $('#head_img').attr('src', src);
                //$('#headImage_on').addClass("uploaded");
                //src = '';
                /* $('#file1_on').html('<input type="file" name="file1" style="position: absolute; right: -160px;top: 0px;opacity:0;" id="chooseImage" value="">重新上传');*/
                return;
            }
        });
        function save() {
            if ($('#tag').val().length == 0) {
                bui.alert('请填写标签')
            } else {
                var html = "<li class='cus-li'><div class='custom-item'>" + $('#tag').val() + "</div><img id='deltag' class='deltags' src='./web/img/del.png'/></li>"
                $('.custom-list').append(html);
                $('#tag').val('');
                setDom();
                $('#edit-tag').show()
                deltag();
                isClick = true;
                $('#edit-tag').text("编辑")
                $('.deltags').hide()
            }
        }
        // 点击变背景颜色
        function setDom() {
            var item = $('.custom-item');
            for (var i = 0; i < item.length; i++) {
                item[i].index = i;
                item[i].onclick = function () {
                    if (item[this.index].className == 'custom-item') {
                        item[this.index].className = 'custom-item selected';
                    } else {
                        item[this.index].className = 'custom-item';
                    }
                }
            }
        }
        // 点击编辑
        $('#edit-tag').click(function () {
            if (isClick == false) {
                isClick = true;
                $('.deltags').hide()
                $('#edit-tag').text("编辑")
            }
            else if (isClick == true) {
                isClick = false;
                $('.deltags').show()
                $('#edit-tag').text("完成")
            }
        })
        // 点击删除
        function deltag() {

            var del = $('.deltags');
            if (del.length == 0) {
                        isClick = true;
                        $('#edit-tag').text("编辑")
                    }
            for (var i = 0; i < del.length; i++) {
                del[i].index = i;
                del[i].onclick = function () {
                    var li = document.getElementsByClassName('cus-li');
                    console.log(this.index);
                    var item = document.getElementById("custom-item");
                    item.removeChild(li[this.index]);
                    deltag();
                    
                }
            }
            // .click(function () {
            //     console.log($(this).index())
            //     var index = $(this).index();

            // })
        }
    </script>

</body>

</html>